<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        position: relative;
        width: 400px;
        background-color: aqua;
      }
      .body {
        margin-left: 40px;
      }
      .bottom {
        position: relative;
        height: 45px;
      }
      /*由于绝对定位导致脱离的文档流 嵌套一层 父元素设置高度*/
      .bottom .bt {
        position: absolute;
        right: 0;
      }
      .clear-float::after {
        content: "";
        display: block;
        overflow: hidden;
        clear: both;
      }
      ul {
        list-style: none;
      }
      .box ul {
        border-top: 5px solid #ccc;
      }
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
  </head>
  <body>
    <div class="box clear-float">
      <div class="header">
        <span>昵称:</span>
        <input type="text" id="name" />
      </div>
      <div class="body">
        <textarea id="content" cols="50" rows="5"></textarea>
      </div>
      <div class="bottom">
        <div class="bt">
          <input type="checkbox" name="hiddenName" id="hiddenName" /> 匿名
          <br />
          <input type="button" value="发表" id="btn" />
        </div>
      </div>
      <ul id="comment"></ul>
    </div>
    <script>
      const $name = $("#name");
      const $content = $("#content");
      const $hiddenName = $("#hiddenName");
      const $btn = $("#btn");
      const $comment = $("#comment");

      //点击发表按钮
      $btn.click(function () {
        //判断是否选中匿名
        console.log($hiddenName.prop("checked"));
        let name = $name.val();
        const content = $content.val();
        if ($hiddenName.prop("checked")) {
          name = "路人甲";
        }
        let str = `<li><p>${name}</p><p>${content}</p></li>`;
        console.log($comment.html());
        str = $comment.html() + str;
        $comment.html(str);
        $name.val("");
        $content.val("");
      });
    </script>
  </body>
</html>
